<template>
    <div style=" display: grid;place-items: center;">
        <div style="font-size: larger;font-weight: 600;">
            {{ article ? article.title : "哈哈" }}
        </div>
        <el-divider border-style="dashed" />
        <div style="text-align: center;width: auto;">
            <span style="margin-right: 15px;">
                作者:{{ article.author }}
            </span>
            <span>
                发布于:{{ article.time ? article.time.slice(0, 16) : "哈哈" }}
            </span>
        </div>
        <el-divider />
        <div v-html="article.content" style="min-height: 630px;">

        </div>
        <el-divider />
        <el-row style="width: 100%;margin-bottom: 20px;">
            <div style="position: absolute;left: 10px;">
                <el-button :type="info" link v-if="next != ''">
                    <router-link :to="{ name: 'article', query: { id: next.id } }" class="article">
                        下一篇：{{ next.title }}</router-link>
                </el-button>
                <el-button :type="info" link v-else disabled style="width: 300px;font-size: larger;">上一篇：</el-button>
            </div>
            <div style="position: absolute;right: 10px;">
                <el-button :type="info" link v-if="previous != ''">
                    <router-link :to="{ name: 'article', query: { id: previous.id } }" class="article">
                        下一篇：{{ previous.title }}</router-link>
                </el-button>
                <el-button :type="info" link v-else disabled style="width: 300px;font-size: larger;">下一篇：</el-button>
            </div>
        </el-row>
    </div>
</template>

<script>
import { ref } from 'vue';
import $ from 'jquery';
import router from '@/router';
export default {
    name: "mainArticleComponents",
    props: {
        article: {
            type: Object,
        }
    },
    setup(props) {
        let next = ref('');
        let previous = ref('');
        let jumpNext = () => {
            router.push({ name: 'article', query: { id: next.value.id } });
        }
        let jumpPrevious = () => {
            router.push({ name: 'article', query: { id: previous.value.id } });
        }
        $.ajax({
            type: "post",
            url: "http://124.221.73.180:3001/articleGet/nextArticle/",
            data: {
                id: props.article.id,
                tag: props.article.tag,
            },
            success(resp) {
                if (resp == null) {
                    console.log(resp + "ADSOJNASDSAD");
                }
                else next.value = resp;
            }
        })
        $.ajax({
            type: "post",
            url: "http://124.221.73.180:3001/articleGet/previousArticle/",
            data: {
                id: props.article.id,
                tag: props.article.tag,
            },
            success(resp) {
                if (resp == null) {
                    console.log(resp + "ADSOJNASDSAD");
                }
                else previous.value = resp;
            }, error() {
                previous.value = '';
            }
        })
        return {
            next,
            previous,
            jumpNext,
            jumpPrevious,
        }
    }
}

</script>

<style scoped>
a {
    text-decoration: none;
    width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: black;
    font-size: larger;
}

a:visited {
    text-decoration: none;
    color: black;
}

a:hover {
    color: rgb(176, 0, 24);
}
</style>